  <!-- 文件管理 -->
  <template>
    <div class="main-body">
        <header class="main-body-search">
          <el-form :model="search" @submit.native.prevent>
            <el-row :gutter="50" type="flex" justify="space-between">
            <el-col :span="12">
              <el-button type="primary" @click="showDetail({})" icon="el-icon-plus">新建通知公告</el-button>
            </el-col>
            <el-col :span="12" style="text-align: right;">
              <el-form-item label class="nja-form-line">
                <el-input
                style="width: 300px;"
                  v-model.trim="search.title"
                  placeholder="通知公告名称"
                  clearable
                  @keyup.enter.native="searchHandle"
                >
                <div  slot="prefix" style="height: 100%;width: 100%;display: flex;justify-content: center;align-items: center;">
                  <i class="el-icon-search"></i>
                </div>
                <el-button type="primary" slot="append" @click="searchHandle">查询</el-button>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          </el-form>
        </header>
        <el-main class="main-body-table">
          <div class="table-shadow"></div>
          <el-table :data="tableData" stripe style="width: 100%" height="calc(100vh - 250px)">
            <el-table-column type="index" label="序号" align="center" width="80"></el-table-column>
            <el-table-column prop="title" label="标题" align="left" min-width="300"></el-table-column>
            <el-table-column prop="subType" label="分类" align="center" min-width="100"></el-table-column>
            <el-table-column prop="createTime" label="发布时间" align="center" min-width="150"></el-table-column>
            <el-table-column label="操作" fixed="right" align="center" width="160px">
              <template slot-scope="scope">
                <div style="display: flex;">
                  <el-button size="mini" type="primary" @click="showDetail(scope.row)">编辑</el-button>
                  <el-button size="mini" type="danger"  @click="deleteRow(scope.row)">删除</el-button>
                </div>
              </template>
            </el-table-column>
            <template #empty>
              <el-empty description="暂无数据"></el-empty>
            </template>
          </el-table>
          <!--工具条-->
          <el-pagination
            background
            class="main-body-table-page"
            layout="total, prev, pager, next, jumper"
            @current-change="handleCurrentChange"
            :current-page="search.current"
            :page-size="search.size"
            :total="search.total"
          ></el-pagination>
        </el-main>
        <el-dialog
          :title="form.id ? '编辑通知公告' : '新增通知公告'"
          :visible.sync="dialogVisible"
          :close-on-click-modal="false"
          center
          top="50px"
          v-dialogDrag
          custom-class="mydialog"
          width="80%"
        >
          <el-form ref="form" class="formlayout" :model="form" label-width="90px" label-position="left">
            <el-row :gutter="30">
                <el-col :span="24">
                <el-form-item label="标题" prop="title" required :rules="rules">
                  <el-input v-model="form.title" placeholder="请输入通知公告名称" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="类型" prop="subType">
                 <el-select style="width: 100%" v-model="form.subType">
                  <el-option label="消息通知" value="消息通知"></el-option>
                 </el-select>
                </el-form-item>
              </el-col>
             
                <el-col :span="12">
                  <el-form-item label="发布时间" prop="createTime" required :rules="rules">
                    <el-date-picker
                      v-model="form.createTime"
                      type="datetime"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      placeholder="选择日期时间">
                    </el-date-picker>
                </el-form-item>
                </el-col>
                <el-col :span="24">
                <el-form-item label-width="0px">
                  <div class="left vue-editor ">
                    <Toolbar ref="ToolbarRef" style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig"
                      :mode="mode" />
                    <Editor style="height: calc(100vh - 500px); overflow-y: hidden; background-color: rgba(95, 104, 242, 0.9);" v-model="form.content"
                      :defaultConfig="editorConfig" :mode="mode" @onCreated="onCreated" />
                  </div>
                </el-form-item>
                </el-col> 
            </el-row>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" style="width: 120px;" @click="saveHandle">保存</el-button>
            <el-button style="width: 120px;" @click="dialogVisible = false">取消</el-button>
          </span>
        </el-dialog>
      </div>
    </template>
    
    <script>
    import {
      SelectPage,
      SelectList,
      DeleteHandle,
      InsertHandle,
      UpdateHandle
    } from '@/api/admin/article'
    import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
    export default {
      components: { Editor, Toolbar },
      data() {
        return {
          dialogVisible: false,
          search: {
            current: 1,
            size: 20,
            total: 0,
            title: ''
          },
          rules: [{required: true, message: '必填'}],
          form: {
            title: '',
            subType: '',
            // type: '通知公告',
            createTime: '',
            content: ''
          },
          editor: null,
          html: '',
          toolbarConfig: {
          },
          editorConfig: {
            MENU_CONF: {
              uploadImage: {
                base64LimitSize: 5 * 1024 * 1024
              }
            },
            placeholder: '请输入内容...'
          },
          mode: 'simple', // or 'simple'
          tableData: []
        }
      },
      beforeDestroy() {
        const editor = this.editor
        if (editor == null) return
        editor.destroy() // 组件销毁时，及时销毁编辑器
      },
      methods: {
        onCreated(editor) {
            this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
          },
        showDetail(row) {
          this.form = Object.assign(
            {
              title: '',
              subType: '',
              // type: '通知公告',
              createTime: '',
              content: ''
            },
            row
          )
          if (row.id) {
            SelectList({id: row.id}).then(res => {
                if (res.code === 20000) {
                  this.form = Object.assign({}, res.data[0])
                }
            })
          }
         
          this.dialogVisible = true
          this.$nextTick(() => {
            this.editor.setHtml(this.form.content)
            this.$refs.form.clearValidate()
          })
        },
        saveHandle() {
          this.$refs['form'].validate((valid) => {
            if (valid) {
              // 保存
              let params = Object.assign({}, this.form)
              let API = InsertHandle
              if (params.id) {
                API = UpdateHandle
              }
              delete params.lastUpdateTime
              API(params).then((res) => {
                console.log('RegisterRequest', res)
                if (res.code === 20000) {
                  this.$message({
                    type: 'success',
                    message: '操作成功'
                  })
                  this.dialogVisible = false
                  this.loadData()
                }
              })
            }
          })
        },
        deleteRow(row) {
          console.log(row)
          this.$confirm('确定删除吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            DeleteHandle({ id: row.id }).then((res) => {
              if (res.code === 20000) {
                this.$message({
                  type: 'success',
                  message: '删除成功'
                })
                this.loadData()
              }
            })
          })
        },
        handleCurrentChange(val) {
          this.search.current = val
          this.loadData()
        },
        searchHandle() {
          this.search.current = 1
          this.loadData()
        },
        loadData() {
          SelectPage(this.search)
            .then((res) => {
              console.log('success:', res)
              this.tableData = res.data.records
              this.search.total = res.data.total
            })
            .catch((err) => {
              console.log('err:', err)
            })
        }
      },
      mounted() {
        this.loadData()
      }
    }
    </script>
    
    <style lang="scss" scoped>
    .tableimg {
      width: 45px;
    }
    .formlayout {
      padding: 20px 40px;
    }
    </style>
    <style src="@wangeditor/editor/dist/css/style.css"></style>
    